<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">

        <!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="../src/mmGrid.css">
        <link rel="stylesheet" href="../src/mmPaginator.css">
        <link rel="stylesheet" href="../src/uliTreeGrid.css">
        <link rel="stylesheet" href="../src/uliGantt.css">
        <link rel="stylesheet" href="../src/splitter.css">
        <link rel="stylesheet" href="js/vendor/jquery-ui-1.9.2.custom/css/redmond/jquery-ui-1.9.2.custom.min.css">
        <script src="js/vendor/modernizr-2.6.2.min.js"></script>
        <!--[if lt IE 9]>
            <script src="js/vendor/html5shiv.js"></script>
            <script src="../src/style-shim.js"></script>
        <![endif]-->
    </head>
    <body style="padding: 40px;">
        <main>
            <div style="margin-bottom: 5px;">
                <button id="btnAddTree" class="button" >增加树子结点</button>
                <button id="btnAdd" class="button" >增加结点</button>
                <button id="btnInsert" class="button" >插入结点</button>
                <button id="btnAddTreeChild" class="button" >增加子结点</button>
                <button id="btnAddExpand" class="button" >増加折叠结点</button>
                <button id="btnRemoveSelected" class="button" >删除</button>
                <button id="btnUnIndent" class="button" title="减少级别">&lt;</button>
                <button id="btnIndent" class="button" title="増加级别">&gt;</button>
                <button id="btnExpand" class="button" title="展开">+</button>
                <button id="btnCollapse" class="button" title="收起">-</button>
                <button id="btnUp" class="button" title="收起">上移</button>
                <button id="btnDown" class="button" title="收起">下移</button>
            </div>

            <div id="ttoolbar">
                <button id="btnToday" class="button" >跳转到今天</button>
                <button id="btnMonth" class="button" >月</button>
                <button id="btnWeek" class="button" >周</button>
                <button id="btnDay" class="button" >日</button>
            </div>
            <div id="gantt"></div>

            </div>
            <div id="log" style="height:100px;overflow:auto;border:1px solid #ccc;margin-top:20px">
            </div>
        </main>
        <style>
            div.gantt-tooltip {
                height:96px;
            }
        </style>
        <script src="js/vendor/jquery-1.9.1.min.js"></script>
        <script src="js/vendor/jquery-migrate-1.2.1.min.js"></script>
        <script src="js/plugins.js"></script>
        <script src="../src/mmGrid.js"></script>
        <script src="../src/mmPaginator.js"></script>
        <script src="../src/uliTreeGrid.js"></script>
        <script src="../src/uliGantt.js"></script>
        <script src="../src/jquery.cookie.js"></script>
        <script src="../src/splitter.js"></script>
        <script src="../src/ajaxQueue.js"></script>
        <script src="../src/jquery.event.drag-2.2.js"></script>
        <!--[if lte IE 8]>
            <script src="../src/r2d3.js" charset="utf-8"></script>
        <![endif]-->
        <!--[if gte IE 9]><!-->
        <script src="../src/d3.min.js"></script>
        <!--<![endif]-->        
        <script src="../src/jquery.jeditable.js"></script>
        <script src="js/vendor/jquery-ui-1.9.2.custom/js/jquery-ui-1.9.2.custom.min.js"></script>
        <script src="js/vendor/jquery.jeditable.datepicker.js"></script>
        <script>
            $(document).ready(function(){
                
                var _id = 20;
                function get_id(){ _id ++; return _id}
                
                var items = [
                    {name:'需求阶段', 'begin_date':'2013-1-5', 'end_date':'2014-2-1', 'pre_task':'', type:'1', 'status':'1', 'percent':60, id:1}
                    , {name:'需求分析', 'begin_date':'2013-1-5', 'end_date':'2013-1-20', 'finish_begin_date':'2013-1-10', 'finish_end_date':'2013-1-20', 'pre_task':'', type:'1', 'status':'3', 'percent':60, _parent:1, id:2}
                    , {name:'需求分析评审', 'begin_date':'', 'end_date':'2013-2-25', 'pre_task':'', 'pre_task':'2', type:'2', 'status':'2', 'percent':30, _parent:1, id:3}
                    , {name:'开发阶段', 'begin_date':'2013-2-5', 'end_date':'2013-5-30', 'pre_task':'', type:'1', 'status':'1', 'percent':0, id:4}
                    , {name:'概要设计', 'begin_date':'2013-2-10', 'end_date':'2013-2-20', 'pre_task':'', 'finish_begin_date':'2013-2-10', type:'1', 'status':'1', 'percent':40, _parent:4, id:5}
                    , {name:'详细设计', 'begin_date':'2013-2-15', 'end_date':'2013-2-25', 'pre_task':'5', type:'1', 'status':'2', 'percent':0, _parent:4, id:6}
                    , {name:'开发', 'begin_date':'2013-3-11', 'end_date':'2013-4-20', 'pre_task':'', type:'1', 'status':'1', 'percent':0, _parent:4, id:7}
                    , {name:'编码', 'begin_date':'2013-1-5', 'end_date':'2013-2-1', 'pre_task':'', type:'1', 'status':'1', 'percent':0, _parent:7, id:8}
                    , {name:'单元测试', 'begin_date':'2013-1-5', 'end_date':'2013-2-1', 'pre_task':'', type:'1', 'status':'1', 'percent':0, _parent:7, id:9}
                ]

                for (var i=0; i<1000; i++){
                    items.push(make_item());
                }
                
                var f_status = function(v){
                    if (v=='1') return '正常';
                    else if(v=='2') return '延迟';
                    else if(v=='3') return '完成';
                    else if(v=='6') return '提前完成';
                }
                var f_type = function(v){
                    if (v=='1') return '阶段';
                    else return '里程碑';
                }
                var f_percent = function(v){
                    return v+'%';
                }
                
                function TooltipHtml(d, opts){
                    var s = ['任务: '+d.title,
                        '开始时间: '+d.begin_date,
                        '结束时间: '+d.end_date,
                        '实际开始时间: '+(d.finish_begin_date || ''),
                        '实际结束时间: '+(d.finish_end_date || ''),
                        '完成百分比: '+d.finish_percent+'%'
                        ];
                    return s.join('<br/>');
                }
                
                var cols = [
                    {title:'FIELD ID', name:'id', width: 30, align: 'center',lockWidth:true},
                    {title:'名称', name:'name' ,width:150, lockDisplay: true, editor:{type:'text'} },
                    {title:'开始时间', name:'begin_date' ,width:80, editor:{type:'datepicker'} },
                    {title:'结束时间', name:'end_date' ,width:80, editor:{type:'datepicker'} },
                    {title:'实际开始时间', name:'finish_begin_date' ,width:80, editor:{type:'datepicker'} },
                    {title:'实际结束时间', name:'finish_end_date' ,width:80, editor:{type:'datepicker'} },
                    {title:'执行百分比', name:'percent', width:60, editor:{type:'int'}, renderer:f_percent},
                    {title:'前置任务', name:'pre_task' ,width:80, editor:{type:'text'} },
                    {title:'状态', name:'status' ,width:80, editor:{type:'select', choices:[['1','正常'], ['2', '延迟'], ['3', '完成'], ['6', '提前完成']] }, renderer:f_status },
                    {title:'类型', name:'type', width:60, editor:{type:'select', choices:[['1','阶段'], ['2', '里程碑']]}, renderer:f_type },
                ];

                var grid_settings = {
                    height: 300

                    , cols: cols
                    , method: 'get'
                    // 直接从array中加载数据
                    , items: items
                    // ajax方式加载数据
                    //, url: "data/gantt.json"
                    , checkCol: true
                    , fitColWidth: true
//                    , paginator: $('#paginator').mmPaginator()
                    , nowrap: true
                    , multiSelect: true
                    , fullWidthRows: false
                    , indexCol: true
//                    , showIcon: true
                    //tree options
                    , treeColumn: 'name'  //第几列是树结点
                    , idField: 'id'  //缺省就是使用id
//                    , initialState: "expanded"
//                    , initialState: "collapsed"
                    , clickableNodeNames: true  //单击结点名称自动切换展示，折叠状态
//                    , expandable: false
                    , indexCol: true
                    , editable: true    //可以直接编辑
                    , cellEditUrl: function(value, settings){return value;}

                }
                
                var gantt = $('#gantt').gantt(
                    {grid: grid_settings
                    , gantt: {
                        data:[]
                        , scale:"week"
                        , todayLineFlag : false
                        , titleName:'name'
                        , group: function(d){return d._isParent;}
                        , color: function(d){
                            if (d.status == '2') return 'red';
                            else if (d.status == '3' || d.status == '6') return 'green';
                            return '';
                            }
                        , tooltipHtml: TooltipHtml
                        , today: new Date(2013, 0, 1)
                        , ganttDrawAuto: false
                        }
                    });

                var grid = $("#gantt").gantt('getGrid');

                function item_tree(){
                    var data = [
                        {name:'任务1', 'begin_date':'2013-1-5', 'end_date':'2013-2-1', 'pre_task':'', type:'1', _isParent:true, id:get_id(),
                        _children:[
                            {name:'需求分析1', 'begin_date':'2013-1-5', 'end_date':'2013-2-1', 'pre_task':'', type:'1', id:get_id()}
                            , {name:'需求分析评审1', 'begin_date':'2013-1-5', 'end_date':'2013-2-1', 'pre_task':'', type:'1', id:get_id()}
                        ]}
                        , {name:'任务2', 'begin_date':'2013-1-5', 'end_date':'2013-2-1', 'pre_task':'', type:'1', _isParent:true, id:get_id(),
                        _children:[
                         {name:'概要设计2', 'begin_date':'2013-1-5', 'end_date':'2013-2-1', 'pre_task':'', type:'1', id:get_id()}
                        , {name:'详细设计2', 'begin_date':'2013-1-5', 'end_date':'2013-2-1', 'pre_task':'', type:'1', id:get_id()}
                        , {name:'开发2', 'begin_date':'2013-1-5', 'end_date':'2013-2-1', 'pre_task':'', type:'1', id:get_id()}
                        ]}
                    ]
                    return data;
                }
                
                function make_item(){
                    var id = get_id();
                    var data = {name:'任务'+id, 'begin_date':'2013-3-5', 'end_date':'2013-4-1', 'pre_task':'', type:'1', id:id}
                    return data;
                }
                
                $('#btnAddTree').on('click', function(){
                    var index = grid.mmGrid('selectedItem');
                    grid.mmGrid('addChild', item_tree(), index, true);
                });
                
                $('#btnAdd').on('click', function(){
                    var index = grid.mmGrid('selectedItem');
                    grid.mmGrid('add', make_item(), index, true);
                });
                
                $('#btnInsert').on('click', function(){
                    var index = grid.mmGrid('selectedItem');
                    grid.mmGrid('insert', make_item(), index, true);
                });
                
                $('#btnAddExpand').on('click', function(){
                    var index = grid.mmGrid('selectedItem');
                    var data = make_item();
                    data._isParent = true;
                    grid.mmGrid('addChild', data, index, false);
                });
                $('#btnAddTreeChild').on('click', function(){
                    var index = grid.mmGrid('selectedItem');
                    grid.mmGrid('addChild', make_item(), index, true);
                });
                $('#btnRemoveSelected').on('click', function(){
                    var index = grid.mmGrid('selectedItems');
                    grid.mmGrid('remove', index);
                });
                $('#btnIndent').on('click', function(){
                    var index = grid.mmGrid('selectedItem');
                    grid.mmGrid('indent', index, true);
                });
                $('#btnUnIndent').on('click', function(){
                    var index = grid.mmGrid('selectedItem');
                    grid.mmGrid('unindent', index, true);
                });
                $('#btnExpand').on('click', function(){
                    var index = grid.mmGrid('selectedItem');
                    grid.mmGrid('expand', index);
                });
                $('#btnCollapse').on('click', function(){
                    var index = grid.mmGrid('selectedItem');
                    grid.mmGrid('collapse', index);
                });
                $('#btnUp').on('click', function(){
                    var index = grid.mmGrid('selectedItem');
                    grid.mmGrid('up', index);
                });
                $('#btnDown').on('click', function(){
                    var index = grid.mmGrid('selectedItem');
                    grid.mmGrid('down', index);
                });
                
                //甘特图处理
                $('#btnToday').on('click', function(){
                    $('#gantt').gantt("toToday");
                });
                $('#btnMonth').on('click', function(){
                     $('#gantt').gantt("redraw", "month");
                });
                $('#btnWeek').on('click', function(){
                    $('#gantt').gantt("redraw", "week");
                });
                $('#btnDay').on('click', function(){
                    $('#gantt').gantt("redraw", "day");
                });
                
                
                function log_msg(e, data){
                    if(e.type == 'error')
                        $('#log').append(e.type+': '+data.name+','+e.originalEvent.message+'</br>');
                    else
                        $('#log').append(e.type+': '+data.name+'</br>');
                }
                
                //监控事件
                var events = ['delete', 'deleted', 'add', 'added', 'error',
                    'expand', 'expanded', 'collapse', 'collapsed', 'indent',
                    'indented', 'unindent', 'unindented', 'updated']
                for(var i=0; i<events.length; i++){
                    grid.on(events[i], function(e, data){
                        log_msg(e, data);
                    });
                }

                function make_item(){
                    var id = get_id();
                    var data = {name:'需求分析', 'begin_date':'2013-1-5', 'end_date':'2013-1-20', 'finish_begin_date':'2013-1-10', 'finish_end_date':'2013-1-20', 'pre_task':'', type:'1', 'status':'3', 'percent':60, id:id};
                    return data;
                }

                grid.mmGrid('set_notation', 1, 'begin_date', 'warning', 'test');
            });
        </script>
    </body>
</html>
